<template>
	<div class="backwarp">
		<el-container>
			<el-header><Header></Header></el-header>
			<el-container style="padding: 60px 0;">
				<el-aside width="240px" style="padding-bottom: 120px;"><BackNavList></BackNavList></el-aside>
				<el-main>
					<div class="elMain">
						<div class="indexList">
							<el-col :span="6">
								<div class="itemCard" style="background-color:#e3e3e3;" ondragstart="return false">
									<img src="../../assets/images/animat02.gif" class="animat animat2">
									<!-- <img src="../../assets/images/animat01.gif" class="animat animat1"> -->
								</div>
							</el-col>
							<el-col :span="6">
								<div class="itemCard">
									<div><div class="name">文章<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_mate"></use></svg></div>
									<div class="numb">{{artLeng}}</div></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="itemCard">
									<div><div class="name">友链<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_link"></use></svg></div>
									<div class="numb">{{FLinkLeng}}</div></div>
								</div>
							</el-col>
							<el-col :span="6">
								<div class="itemCard">
									<div><div class="name">作者<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_about1"></use></svg></div>
									<div class="numb">{{authorLeng}}</div></div>
								</div>
							</el-col>
						</div>
						<div class="sheetCard sheetIndexCard">
							欢迎登录<br>牙姐姐的博客后台
						</div>
					</div>
				</el-main>
			</el-container>
			<el-footer><a href="https://beian.miit.gov.cn">陇ICP备2021000907号-2</a></el-footer>
		</el-container>
	</div>
</template>

<script>
	import '../../assets/font/iconfont.js'
	import Header from '../../components/back/header.vue'
	import BackNavList from '../../components/back/backNavList.vue'
	export default {
		name: 'Backindex',
		data() {
			return {
				artLeng: 0,		// 文章数量
				FLinkLeng: 0,		// 友链数量
				authorLeng: 0,		// 作者数量
			}
		},
		mounted() {
			this.getArticle();this.getFriengLink();
		},
		methods: {
			getArticle(){		//  请求文章列表
				this.$axios.post(this.HOST + '/api/indexPage').then(res => {
					let data = res.data.data;
					for (const i in data) {
						data[i].datetime = data[i].datetime.slice(0,10);
					}
					this.artLeng = data.length;
					let map={},authList=[];
					for (let i=0; i<data.length;i++) {
						if (!map[data[i].author]) {
							authList.push({author: data[i].author});
							map[data[i].author] = data[i]
						} 
					}
					this.authorLeng = authList.length;
				}).catch(err => {
					console.log(err, ' catch ')
				})
			},
			getFriengLink(){
				this.$axios.post(this.HOST + '/api/blogExtLink').then(res => {
					let data = res.data.data;
					let friendChainArr = [];
					for (const i in data) {
						if (data[i].typeLink=='extLink') {
							friendChainArr.push(data[i])
						}
					}
					this.FLinkLeng = friendChainArr.length
				}).catch(err => {
					console.log(err, ' catch ')
				})
			}
		},
		components: {
			Header: Header,
			BackNavList: BackNavList,
		}
	}
</script>

<style>
	@import url("../../assets/css/backStyle.css");
	.backwarp .el-header{padding:0;position: fixed;width: 100%;z-index: 9999;}
	.userArr .el-dialog {width: 460px;border-radius: 8px;padding-right: 30px;}
</style>
